import React, { memo, useEffect, useRef, useState } from 'react'
import { list, addItem, deleteItem, editItem, searchItem } from '../api/cart'
import { Popup } from 'antd-mobile'
const Home1 = memo(() => {
    const [visible1, setVisible1] = useState(false)
    let [cartList, setCartList] = useState([])
    let [id, setId] = useState(0)
    let itemRef = useRef()
    let priceRef = useRef()
    let xitemRef = useRef()
    let xpriceRef = useRef()
    useEffect(() => {
        render()
    }, [])
    const render = async () => {
        let res = await list()
        setCartList(res)
    }
    return (
        <div>
            {cartList.map(item =>
                <div
                    style={{
                        marginTop: '15px',
                        backgroundColor: '#eee',
                        padding: "10px"
                    }}
                    key={item.id}
                >
                    商品:{item.name}-价格:{item.price}
                    <button onClick={() => {
                        deleteItem(item.id).then(res => {
                            render()
                        })
                    }}>删除</button>
                    <button onClick={() => {
                        setVisible1(true)
                        setId(item.id)
                    }}>修改</button>
                </div>)}
            <br />
            <br />
            <input type="text" ref={itemRef} placeholder='请输入商品' />
            <input type="text" ref={priceRef} placeholder='请输入价格' />
            <br />
            <br />
            <button onClick={() => {
                if (itemRef.current.value !== '' && priceRef.current.value !== '') {
                    addItem({ name: itemRef.current.value, price: priceRef.current.value }).then(res => {
                        render()
                    })
                }
                priceRef.current.value = ''
                itemRef.current.value = ''
            }}>添加</button>
            <br />
            <br />
            <input type="text" onChange={(e) => {
                searchItem(e.target.value).then(res => {
                    setCartList(res)
                })
            }} />

            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false)
                }}
                onClose={() => {
                    setVisible1(false)
                }}
                bodyStyle={{ height: '40vh' }}
            >
                <input type="text" ref={xitemRef} placeholder='请输入商品' />
                <input type="text" ref={xpriceRef} placeholder='请输入价格' />
                <button onClick={() => {
                    setVisible1(false)
                    setId(0)
                }}>取消</button>
                <button onClick={() => {
                    if (xitemRef.current.value !== '' && xpriceRef.current.value !== '') {
                        editItem(id, { name: xitemRef.current.value, price: xpriceRef.current.value }).then(res => {
                            render()
                        })
                    }
                    xpriceRef.current.value = ''
                    xitemRef.current.value = ''
                    setVisible1(false)
                }}>确定</button>
            </Popup>
        </div>
    )
})

export default Home1